<template>
  <div>
    <div class="header">
        <div class="head">
            <div>
            <van-icon name="arrow-left" @click="fh" width="20" height="20" class="picture" />
            </div>
            <span>设&nbsp;&nbsp;&nbsp;置</span>
            <img src="../../assets/sweep.png" alt="" width="20" height="20" class="picture">
        </div>
        <div class="setup-one">
            <div class="next" @click="account">
                <p>账号与安全</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>隐私设置</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
        </div>
        <div class="setup-one">
            <div class="next">
                <p>通知设置</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>通用设置</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
        </div>
        <div class="setup-two">
            <div class="next">
                <p>青少年模式</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>深色模式</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>字体大小</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
        </div>
        <div class="setup-three">
            <div class="next">
                <p>帮助与客服</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>鼓励一下</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>个人信息收集清单</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>第三方信息共享清单</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
            <i></i>
            <div class="next">
                <p>关于小红书</p>
                <img src="../../assets/nextstep.png" alt="" class="pictures">
            </div>
        </div>
        <div class="setup-four">
            <p>退出账户</p> 
        </div>
    </div>
  </div>
</template>

<script>

export default {

    methods: {
        fh() {
            console.log(32);
            this.$router.go(-1)
            //返回上一页
        },
        account() {
            // 账号与安全
            this.$router.push('/Security')
        }
    },
}
</script>

<style scoped>
a{
    text-decoration: none;
    color: black;
}

.header {
    /* width: 390px; */
    height: 844px;
    /* margin: 15px; */
    background-color: rgb(245, 245, 245);
}

.head {
    width: 92%;
    height: 80px;
    display: flex;
    margin: 0px 15px 0px 15px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border: 0;
}

.setup-one {
    width: 370px;
    height: 100px;
    background-color: white;
    border-radius: 20px;
    margin: 15px 10px 20px 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-around;
}

i {
    width: 340px;
    height: 0px;
    border: 1px solid rgb(243, 243, 243);
    margin: 0 auto;
}

.setup-one p,
.setup-two p,
.setup-three p {
    margin: 10px 15px;
    font-size: 14px;
}

.setup-two {
    width: 370px;
    height: 150px;
    background-color: white;
    border-radius: 20px;
    margin: 20px 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-around;
}

.setup-three {
    width: 370px;
    height: 250px;
    background-color: white;
    border-radius: 20px;
    margin: 20px 10px 0px 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-around;
}

.setup-four {
    width: 370px;
    height: 50px;
    background-color: white;
    border-radius: 20px;
    margin: 20px 10px 0px 10px;
}
.setup-four p{
    text-align: center;
    line-height: 50px;
    /* font-size: 10px; */
}
.pictures{
    width: 15px;
    height: 15px;
}
.picture.van-icon.van-icon-arrow-left{
    width: 20px;
}
.next{
    width: 350px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}  

</style>